<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>账单列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
</head>
<body>
<h1 align="center">账单列表</h1>
<hr>
<!--查询条件开始-->
<div style="text-align: center">

    <form class="layui-form" id="searchFrm" method="post">

        <div class="layui-form-item" style="text-align: center;">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="doSearch">查询</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                <button type="button" class="layui-btn layui-btn-warm" id="addGoods">添加</button>
            </div>
        </div>
    </form>
</div>
<!--查询条件结束-->


<!--数据表格开始-->
<table class="layui-hide" id="goodsTable"></table>
<!--数据表格结束-->


<!--添加的弹出层开始-->
<div id="addGoodsDiv" style="display: none">
    <form class="layui-form" id="dataFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">账单类型</label>
            <div class="layui-input-block" id="billTypeDiv">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">账单标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="required"  placeholder="请输入账单标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">入账日期</label>
                <div class="layui-input-inline">
                    <input type="tel" name="billtime" id="billtime" lay-verify="required" readonly autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">入账金额</label>
                <div class="layui-input-inline">
                    <input type="text" name="price" lay-verify="required|number" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">账单备注</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入备注" name="remark" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="button" class="layui-btn" id="doSubmit" value="提交">
                <input type="button" class="layui-btn layui-btn-primary" value="重置">
                <input type="button" class="layui-btn layui-btn-warm" value="返回">
            </div>
        </div>

    </form>

</div>
<!--添加的弹出层结束-->


<script type="text/javascript" src="/resources/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['table','form','layer','jquery','laydate'],function(){
        var table=layui.table;
        var form=layui.form;
        var layer=layui.layer;
        var $=layui.jquery;
        var laydate=layui.laydate;

        //渲染时间选择器
        laydate.render({
            elem:"#startTime",
            type:"datetime"
        });
        laydate.render({
            elem:"#endTime",
            type:"datetime"
        });

        laydate.render({
            elem:"#billtime",
            type:"datetime"
        });


        //使用ajax加载查询条件的账单类型
        $.get("/goodstype/loadAllGoodsType",function(res){
            var data=res.data;
            var searchTypeId=$("#searchTypeId");
            var html="<option value=''>请选择账单类型</option>";
            $.each(data,function(i,item){
                html+= "<option value="+item.id+" >"+item.name+"</option>"
            });
            searchTypeId.html(html);
            form.render("select");
        })

        //渲染表格数据
        var goodsTableIns=table.render({
            elem: '#goodsTable'
            ,url:'/goods/loadAllGoods'
            ,cols: [ [
                {field:'goodsId',align:'center', title: 'ID', sort: true}
                ,{field:'goodsName', align:'center',title: '商品名称'}
                ,{field:'goodsImg',align:'center',title: '商品图片'}
                ,{field:'status', align:'center', title: '商品状态'}
                ,{field:'saleNum', align:'center', title: '销售数量'}
                ,{field:'typeId', align:'center',title: '类型'}
                ,{field:'goodsPrice',align:'center',  title: '商品价格'}
            ] ]
            ,page: true
        });

        //模糊查询
        $("#doSearch").on("click",function(){
            var params=$("#searchFrm").serialize();
            billsTableIns.reload({
                url:'/goods/loadAllGoods?'+params
            })
        });


        var mainIndex;
        $("#addGoods").on("click",function(){
            //打开弹层
            mainIndex=layer.open({
                type:1,
                title:'添加账单',
                area:['800px','600px'],
                content:$("#addGoodsDiv"),
                success:function(index){
                    //初始化类型

                    $.get("/goodstype/loadAllGoodsType",function(res){
                        var data=res.data;
                        var billType=$("#goodsTypeDiv");
                        var html='';
                        $.each(data,function(i,item){
                            if(i==0){
                                html+= '<input type="radio" name="typeid" value="'+item.id+'" title="'+item.name+'" checked="">';
                            }else{
                                html+= '<input type="radio" name="typeid" value="'+item.id+'" title="'+item.name+'">';
                            }
                        });
                        billType.html(html);
                        form.render();
                    })
                }
            });
        });


        //提交
        $("#doSubmit").on("click",function(){
            var params=$("#dataFrm").serialize();
            $.post("/goods/addGoods",params,function(res){
                layer.msg(res.msg);
                layer.close(mainIndex);
                billsTableIns.reload();
            })
        })


    });

</script>


</body>
</html>